<template>
  <view class="container">
    <view class="info-box">
      <view class="info-item">
        <text class="label">可兑换钻石数：</text>
        <text class="value">{{ diamond }}</text>
      </view>
      <view class="info-item">
        <text class="label">当前账户余额：</text>
        <text class="value">{{ balance }} 元</text>
      </view>
    </view>
    <view class="input-box">
      <input
          class="diamond-input"
          type="number"
          v-model="exchangeDiamond"
          placeholder="请输入要兑换的钻石数"
          :maxlength="diamond.toString().length"
      />
      <button class="all-btn" @click="exchangeAll">全部兑换</button>
    </view>
    <button class="confirm-btn" @click="confirmExchange">确认兑换</button>
  </view>
</template>

<script>
import {goldToAmount} from '@/common/api.js'
import {mapState, mapActions} from 'vuex'
	
export default {
  data() {
    return {
      exchangeDiamond: ''
    }
  },
  onShow() {
  	this.updateUserinfo()
  },
  computed: {
  	...mapState(['userinfo']),
	balance() {
		return this.userinfo ? this.userinfo.amount : 0
	},
	diamond() {
		return this.userinfo ? this.userinfo.gold : 0
	}
  },
  methods: {
	  ...mapActions(['updateUserinfo']),
    exchangeAll() {
      this.exchangeDiamond = this.diamond
    },
    confirmExchange() {
      if (!this.exchangeDiamond || this.exchangeDiamond <= 0) {
        uni.showToast({ title: '请输入正确的钻石数', icon: 'none' })
        return
      }
      if (this.exchangeDiamond > this.diamond) {
        uni.showToast({ title: '钻石不足', icon: 'none' })
        return
      }
	  uni.showLoading({
	  	title: '正在兑换'
	  })
	  goldToAmount({amount: this.exchangeDiamond}).then(({msg, code}) => {
		  uni.showToast({ title: msg, icon: 'none' })
		  if (code === 200) {
			  this.exchangeDiamond = ''
			  this.updateUserinfo()
		  }
	  })
    }
  }
}
</script>

<style lang="less" scoped>
.container {
  padding: 40rpx 30rpx;
  background: #f7f8fa;
  min-height: 100vh;
}
.info-box {
  background: #fff;
  border-radius: 16rpx;
  box-shadow: 0 4rpx 16rpx #e5e5e5;
  padding: 32rpx 24rpx;
  margin-bottom: 40rpx;
}
.info-item {
  display: flex;
  align-items: center;
  margin-bottom: 16rpx;
  &:last-child { margin-bottom: 0; }
  .label {
    color: #888;
    font-size: 28rpx;
  }
  .value {
    color: #333;
    font-size: 32rpx;
    font-weight: bold;
  }
}
.input-box {
  display: flex;
  align-items: center;
  background: #fff;
  border-radius: 16rpx;
  box-shadow: 0 2rpx 8rpx #ececec;
  padding: 0 16rpx;
  margin-bottom: 80rpx;
}
.diamond-input {
  flex: 1;
  height: 90rpx;
  font-size: 28rpx;
  border: none;
  background: transparent;
  outline: none;
}
.all-btn {
  margin-left: 16rpx;
  background: #f5f5f5;
  color: #007aff;
  padding: 0 28rpx;
  height: 60rpx;
  line-height: 60rpx;
  font-size: 28rpx;
}
.confirm-btn {
  width: 100%;
  height: 88rpx;
  border-radius: 44rpx;
  background: linear-gradient(90deg, #ffb347, #ffcc33);
  color: #fff;
  font-size: 34rpx;
  border: none;
  font-weight: bold;
  box-shadow: 0 4rpx 16rpx #ffe082;
}
</style>